<template>
  <div id="contain">
    <j-upload
      class="u-btn"
      :showUploadList="showUploadList"
      :text="uploadText"
      :uploadParams="uploadParams"
      :uploadAction="uploadAction"
      :trigger-change="true"
      @change="success"
    ></j-upload>
    <a-table id="table" :columns="columnsList" :data-source="list" :pagination="false" :scroll="{ y: 400 }">
      <span slot="action" slot-scope="text, index, record">
        <a v-if="index['filePath'].indexOf('png') != -1" @click="showPreviewFile(record, index)">预览</a>
        <a v-else @click="downloadFile(record, index)">下载</a>
        <a-divider type="vertical" />
        <a @click="showRenameFile(record, index)">重命名</a>
        <a-divider type="vertical" />
        <a @click="showDeleteFile(record, index)">删除</a>
      </span>
    </a-table>

    <a-modal title="重命名" :visible="renameVisible" @ok="handleRenameOk" @cancel="renameVisible = false">
      <a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
        <a-form-item label="新名称">
          <a-input placeholder="请输入新名称" v-model="newName" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import JUpload from '@/components/jeecg/JUpload'
import { getAction, downFile } from '@/api/manage'
import axios from 'axios'
export default {
  name: 'RelativeFiles',
  props: {
    /** 模块ID */
    id: [String, Number],
  },
  data() {
    return {
      showUploadList: false,
      // 重命名
      renameVisible: false,
      uploadText: '上传',
      uploadAction: window._CONFIG['domianURL'] + '/online/common/upload/createCrmFile',
      columnsList: [
        {
          title: '附件名称',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: '附件大小',
          dataIndex: 'size',
          key: 'size',
          width: 100,
        },
        {
          title: '上传人',
          dataIndex: 'createUserName',
          key: 'createUserName',
        },
        {
          title: '上传时间',
          key: 'createTime',
          dataIndex: 'createTime',
        },
        {
          title: '来源',
          key: 'source',
          dataIndex: 'source',
        },
        {
          title: '操作',
          key: 'action',
          scopedSlots: { customRender: 'action' },
        },
      ],
      list: [],
      uploadParams: {
        batchId: this.id,
      },
      newName: '',
      fileId: '',
      url: {
        pagingFileList: '/online/common/upload/pagingFileList',
        deleteCrmFile: '/online/common/upload/deleteCrmFile',
        updateCrmFile: '/online/common/upload/updateCrmFile',
      },
    }
  },
  components: {
    JUpload,
  },
  watch: {
      id(val){
        this.getDetail()
      }
    },
  created() {
    this.getDetail()
  },
  methods: {
    /**
     * 预览文件
     */
    wkPreviewFile(path, name) {
      window.open(
        `${OFConfig.getLocationOrigin()}/file/preview?url=${encodeURIComponent(
          `${path}?fullfilename=${name || ''}&c=${axios.defaults.headers['sessionKey']}`
        )}`
      )
    },
    downloadFile(index, record) {
      window.open(document.location.origin + '/' + record.filePath)
    },
    getDetail() {
      const params = {}
      params[`batchId`] = this.id
      getAction(this.url.pagingFileList, params)
        .then((res) => {
          if (res.success) {
            this.list = res.result
          }
        })
        .catch(() => {})
    },
    // 删除操作
    showDeleteFile(index, record) {
      const that = this
      that.fileId = record.fileId
      this.$confirm({
        title: '提示',
        content: '您确定要删除文件吗？',
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          console.log('699', record)
          getAction(that.url.deleteCrmFile, { fileId: that.fileId }).then((res) => {
            if (res.success) {
              that.$message.success('成功！')
              that.getDetail()
            } else {
              that.$error(res.message)
            }
          })
        },
        onCancel() {},
      })
    },
    // 重命名
    showRenameFile(index, record) {
      this.renameVisible = true
      this.fileId = record.fileId
      this.newName = record.name
    },
    handleRenameOk() {
      const that = this
      const params = {}
      params.fileId = that.fileId
      params.name = that.newName
      getAction(that.url.updateCrmFile, params).then((res) => {
        if (res.success) {
          that.$message.success('成功')
          that.renameVisible = false
          that.getDetail()
        } else {
          that.$message.error(res.message)
        }
      })
    },
    // 预览图片
    showPreviewFile(index, record) {
      this.$bus.emit('preview-image-bus', {
        index: index,
        data: this.list,
      })
    },
    // 上传文件完重新加载数据
    success() {
      this.getDetail()
    },
  },
}
</script>

<style lang="less" scoped>
#contain {
  position: relative;
  .u-btn {
    position: absolute;
    top: 0;
    right: 0;
  }
  #table {
    position: absolute;
    top: 50px;
  }
}
/deep/ .ant-btn {
  color: #fff;
  background-color: #168a40;
  border-color: #168a40;
}
/deep/ .ant-table {
  border: 1px solid rgb(230, 230, 230);
}
</style>